<template>
  <div class="w-full relative z-1000">
    <div class="w-1200px mx-auto pt-23px pb-20px flex items-center">
      <div class="w-245px mr-40px">
        <img src="../assets/images/logo@2x.png" class="w-full" alt="" />
      </div>
      <div v-if="route.path !== '/register'">
        <ul class="flex">
          <template v-for="(item, index) in menus" :key="index">
            <template v-if="item.label === '推荐课程'">
              <a-dropdown>
                <li
                  class="px-24px py-7px menu mr-10px last:mr-0"
                  :class="{ active: item.value === route.path }"
                  @click.prevent
                >
                  <a href="javascript:void(0)" class="font-400 text-16px lh-15px text-op-80 text-#333 no-underline"
                    >推荐课程</a
                  >
                </li>
                <template #overlay>
                  <a-menu @click="onClick2">
                    <a-menu-item key="1">
                      <a href="javascript:;">新媒体</a>
                    </a-menu-item>
                    <a-menu-item key="2">
                      <a href="javascript:;">数据分析</a>
                    </a-menu-item>
                  </a-menu>
                </template>
              </a-dropdown>
            </template>
            <li class="px-24px py-7px menu mr-10px last:mr-0" :class="{ active: item.value === route.path }" v-else>
              <router-link :to="item.value" class="font-400 text-16px lh-15px text-op-80 text-#333 no-underline">{{
                item.label
              }}</router-link>
            </li>
          </template>
        </ul>
      </div>

      <template v-if="route.path !== '/register'">
        <div class="float-right ml-auto" @click="onLogin" v-if="!isLoginIn">
          <div class="login-btn">注册 / 登录</div>
        </div>
        <div v-else class="float-right ml-auto flex items-center">
          <a-avatar>
            <template #icon><UserOutlined /></template>
          </a-avatar>
          <a-dropdown>
            <div class="cursor-pointer text-#292929 text-14px ml-6px max-width-74px truncate" @click.prevent>
              <span class="flex-1 truncate mr-4px">{{ seekerBO?.name }}</span>
              <DownOutlined />
            </div>
            <template #overlay>
              <a-menu @click="onClick">
                <a-menu-item key="1">
                  <a href="javascript:;">求职进展</a>
                </a-menu-item>
                <a-menu-item key="2">
                  <a href="javascript:;">我的简历</a>
                </a-menu-item>
                <a-menu-item key="3">
                  <a href="javascript:;">个人中心</a>
                </a-menu-item>
                <a-menu-item key="4">
                  <a href="javascript:;">退出登录</a>
                </a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>
        </div>
      </template>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { emitter } from '@/hooks/useMitt';
import { UserOutlined, DownOutlined } from '@ant-design/icons-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import ConfirmDialog from 'ant-design-vue/es/modal/ConfirmDialog';
import { createVNode, render } from 'vue';
const menus = [
  {
    label: '首  页',
    value: '/',
  },
  {
    label: '新职业社区',
    value: '/',
  },
  {
    label: '职业AI',
    value: '/job-ai',
  },
  {
    label: '搜索职位',
    value: '/search-position',
  },
  {
    label: '推荐课程',
    value: '/recommand-class',
  },
  {
    label: '职场服务',
    value: '/',
  },
  // {
  //   label: '关于我们',
  //   value: '/',
  // },
];
const route = useRoute();
const userStore = useUserStore();
const router = useRouter();

const isLoginIn = computed(() => {
  return userStore?.userDetail?.educationExperienceBo?.id;
});
const seekerBO = computed(() => {
  return userStore.userDetail?.seekerBO;
});

function onLogin() {
  emitter.emit('open-login');
}

function onClick2({ key }: any) {
  if (key === '1') {
    window.open(`http://med.cledu.cn/`, '_blank');
  } else {
    window.open('http://dat.cledu.cn/', '_blank');
  }
}

function onClick({ key }: any) {
  if (key === '1') {
    // 求职进展
  } else if (key === '2') {
    // 我的简历
    if (route.path !== '/resume') router.push('/resume');
  } else if (key === '3') {
    // 个人中心
  } else {
    const element = document.createDocumentFragment() as any;
    const dialog = createVNode(ConfirmDialog, {
      type: 'confirm',
      visible: true,
      prefixCls: 'ant-modal',
      rootPrefixCls: 'ant',
      contentPrefixCls: 'ant-modal-confirm',
      icon: createVNode(ExclamationCircleOutlined),
      title: '提示?',
      content: '确认退出登录？!',
      okText: '确认',
      cancelText: '取消',
      onCancel: () => {
        dialog.component!.props.visible = false;
      },
      async onOk() {
        try {
          await userStore.appLogout();
        } catch (error) {
          console.log(error);
        }
        window.location.reload();
      },
    });

    render(dialog, element);
  }
}
</script>

<style lang="scss" scoped>
.menu {
  @apply border-1px border-solid border-transparent transition-all border-1px border-solid border-transparent rounded-18px;
  &:hover,
  &.active {
    border-color: #3477e9;
    * {
      @apply text-#3477E9;
    }
  }
}

.login-btn {
  @apply h-34px lh-34px text-center text-white w-110px rounded-17px cursor-pointer;
  background: linear-gradient(90deg, #3375e8, #5c96fb);
}
</style>
